﻿<!DOCTYPE html>
<html lang="zh-cmn-Hans" style="font-size: 16.15px;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>52教育砸金蛋</title>
<!-- 
    <script>
        (function (doc, win) {
		var docEl = doc.documentElement,
				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
				recalc = function () {
					var clientWidth = docEl.clientWidth;
					if (!clientWidth) return;
					docEl.style.fontSize = 5 * (clientWidth / 100) + 'px';
				};

		if (!doc.addEventListener) return;
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
</script> -->

    <style>
        .portrait body div.landscape {
            display: none !important;
        }

        .landscape body div.landscape {
            display: block !important;
        }

        .loading {
            position: fixed;
            z-index: 999;
            top: 0;
            left: 0;
            display: table;
            width: 100%;
            height: 100%;
            background: red;
            color: #cbe8b2;
            text-align: center
        }

        .loading .loader {
            display: table-cell;
            vertical-align: middle
        }

        .loading .loader span {
            position: relative;
            display: inline-block;
            margin-bottom: .5rem;
            border-top: .3rem solid hsla(0, 0%, 100%, .2);
            border-right: .3rem solid hsla(0, 0%, 100%, .2);
            border-bottom: .3rem solid hsla(0, 0%, 100%, .2);
            border-left: .3rem solid #fff;
            -webkit-animation: load 1s infinite linear;
            animation: load 1s infinite linear
        }

        .loading .loader span,
        .loading .loader span:after {
            width: 2.8rem;
            height: 2.8rem;
            border-radius: 50%
        }

        @-webkit-keyframes load {
            0% {
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }

            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        @keyframes load {
            0% {
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }

            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/style2.css">

</head>

<body onload="init();">
    <!--页面加载-->
    <div id="loading" class="loading">
        <div class="loader">
            <span></span>
            <p id="loadtext">Loading...</p>
        </div>
    </div>


    <div class="gamebox">
        <div class="stage">
            <div class="goldenAgg">
                <div class="ball ball1"></div>
                <div class="ball ball2"></div>
                <div class="ball ball3"></div>
                <div class="ball ball4"></div>
                <div class="ball ball5"></div>
                <div class="ball ball6"></div>
            </div>

            <!--中奖-->
            <div class="winBox" style="display: none;">
                <div class="winContent">
                    <div class="winBackImg" id="winBackImg">
                            <span id="money">100元</span> <!-- <img src="http://invi.52carlife.com/choujiange8399.png" id="jiang"> -->
                            <span id="level">特等奖</span>
                    </div>
                   
                   
                    <button class="btn btn-qrcode">关注我们</button>
                    <button id="causel" class="btn">关闭当前</button>
                </div>
            </div>
        </div>
    </div>
    <!--活动说明-->
    <div class="jn-box" style="display: none;">
        <span class="btn-close">×</span>
        <div id="tabs" class="tabs">
            <strong class="current"><span>活动说明</span></strong>
            <strong><span>我的奖品</span></strong>
            <strong><span>排行榜</span></strong>
        </div>
        <div id="tabs-body" class="tabsbox">
            <div>
                <h4>活动时间</h4>
                <p>2019年1月10日—2019年1月31日,每天准时10点</p>
                <h4>活动奖品</h4>
                <p>特 等 奖：200元现金劵 </p>
                <p>一 等 奖：100元现金劵 </p>
                <p>二 等 奖：50元现金劵 </p>
                <p>三 等 奖：30元现金劵 </p>
                <p>参 与 奖：10元现金劵 </p>
                <p>谢谢参与：关注我们有惊喜哦 </p>
                <p>注：本次活动奖品仅适用于52教育平台，有效期至2019年1月31日止，不可折现。</p>

                <h4>主办单位</h4>
                <p>本次活动主办单位为柳州中胤文化传媒有限公司,
                    <br />由广西卡莱网络科技有限公司提供技术支持。
                    <br />主办单位在法律允许的范围内拥有活动的最终解释权。</p>

                <h4>活动及兑奖</h4>
                <p>每个微信号每日10点有一次抽奖机会<br />
                    所获奖金可积累，本次活动截止时间2019年1月31号，用户所得积累奖可在52教育平台使用。
                </p>
                <p>注：每个机构可多人参与抽奖，但最终只能使用一个名额兑奖。</p>

            </div>
            <!-- 我的奖品 -->
            <div style="display: none; padding-bottom: 4rem; position: relative;">
                <div class="winMoney" id="prizeRecord">
                    <!-- 后台获取数据 循环显示奖品 -->
                    <!-- <div class="winRecord">
                   <span>200元现金劵</span>
                   <span>中奖时间：2018.12.20</span>
                </div> -->

                </div>
                <div>加载更多</div>
                <div class="footer-btn">
                    <button id="btn-qrcode" class="btn btn-qrcode">关注我们</button>
                </div>
            </div>
            <!-- 排行榜 -->
            <!-- 垂直 -->
            <div class="list_foreach" style="display: none; padding-bottom: 4rem; position: relative;">
                <!-- 水平 -->
                <div class="firstHeading">
                    <div class="testHead">
                        <div class="second_foreach">
                            <img src="http://invi.52carlife.com/choujiang2@2x.png" alt="52">
                            <div class="people_item" id="second_item">第二名</div>
                        </div>
                    </div>
                    <div class="firstHead">
                        <div class="first_foreach">
                            <img src="http://invi.52carlife.com/choujiang1@2x.png" alt="52">
                            <div class="people_item" id="first_item">第一名</div>
                        </div>
                    </div>
                    <div class="lastHead">
                        <div class="three_foreach">
                            <img src="http://invi.52carlife.com/choujiang3@2x.png" alt="52">
                            <div class="people_item" id="three_item">第三名</div>
                        </div>
                    </div>
                </div>
                <!-- 垂直 更多-->
                <div class="moreShow" id="moreItem">
                    <div class="moreHead">
                        <div class="more-icon">
                            <p>4</p>
                        </div>
                        <div class="more-people">
                            第四名
                        </div>
                    </div>
                    <!-- 第二个可循环 -->
                    <!-- <div class="moreHead">
                        <div class="more-icon">
                            <p>5</p>
                        </div>
                        <div class="more-people">
                            第五名
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>

    <!-- secience -->
    <!--没中-->
    <div id="sorryBox" class="sorryBox" style="display: none;">
        <div>
            <img src="http://invi.52carlife.com/choujiangthanks.png" style="margin-bottom: 10%;">
            <button class="btn btn-qrcode">关注我们</button>
            <button id="closeWin" class="btn">关闭当前</button>
        </div>
    </div>
    <!--关注我们二维码-->
    <div class="qrcodeBox" style="display: none;">
        <div>
            <img src="http://first.52carlife.com/first2top2.jpg">
            <span class="qr-close">×</span>
        </div>
    </div>


    <!-- <img src="http://pjau06cez.bkt.clouddn.com/choujiangjinnang.png" class="acePack"> -->
    <img src="http://invi.52carlife.com/choujiangjingnang@2x.png" class="acePack">



    <!-- <img src="http://invi.52carlife.com/choujiangmusicIocn@2x.png" id="music" class="music"> -->
    <!-- 加音乐 -->
    <span id="musicControl">
        <a id="mc_play" class="on" onclick="play_music();">
            <audio id="musicfx" loop="loop" autoplay="autoplay">
                <source src="http://invi.52carlife.com/musicmusic.mp3" type="audio/mpeg">
            </audio>
        </a>
    </span>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
    <script src="https://cdn.bootcss.com/SoundJS/1.0.2/soundjs.min.js"></script>
    <script src="css/music.js"></script>
    <script>
        function init() {
            // alert(renderTime("2019-01-08T01:18:36.224+0000"));
            var loadFlag = false;
            var _stary, _endy;
            $(".winMoney").on("touchend", function () {
                $(".winMoney").stop().animate({
                    top: 0
                }, 80);
                if ($(this).height() + $(this).scrollTop() >= $(".container ul").height() && !loadFlag) {
                    loadFlag = true;
                    $(".loadmore").addClass("show");
                    $(this).scrollTop(100000000000);
                    var str = "<li>sfsaasdfsafasf</li>";
                    for (var i = 0; i < 3; i++) {
                        str += str;
                    }
                    setTimeout(function () {
                        $(".loadmore").removeClass("show");
                        $(".container ul").append(str);
                        loadFlag = false;
                    }, 1000);
                }
            });


            var assetsPath = "http://invi.52carlife.com/";
            manifest = [{
                    id: "img01",
                    src: "choujiangagg@2x.png"
                },
                {
                    id: "img02",
                    src: "choujiangagg-puo@2x.png"
                },
                {
                    id: "img04",
                    src: "lefthammer@2xleft.png"
                },
                {
                    id: "img05",
                    src: "choujiangjingnang@2x.png"
                },
            ];

            createjs.Sound.alternateExtensions = ["mp3"]; //加载ogg
            preload = new createjs.LoadQueue(true, assetsPath);
            preload.installPlugin(createjs.Sound);
            preload.addEventListener("complete", doneLoading);
            preload.addEventListener("progress", updateLoading);
            preload.loadManifest(manifest);

            function updateLoading() {
                $("#loadtext").text("Loading " + (preload.progress * 100 | 0) + "%");
            }

            //loading完毕
            function doneLoading(event) {
                $("#loading").hide();
                // start 播放背景音乐
                //  createjs.Sound.play("soundname", {interrupt: createjs.Sound.INTERRUPT_NONE, loop: -1, volume: 0.4});
                createjs.Sound.registerSound("http://invi.52carlife.com/musicmusic.mp3", "soundname");
                createjs.Sound.play("soundname", {
                    interrupt: createjs.Sound.INTERRUPT_NONE,
                    loop: -1,
                    volume: 0.4
                });
            }
            var winH = $(window).innerHeight();
            var winW = $(window).innerWidth();
            $("body,.gamebox,.jn-box,.winBox").css({
                height: winH,
                width: winW
            });

            function aClick() {
                // 如果时间超时就不显示就提示
                if (true) {
                    eggshells()
                } else {
                    //超过时间了
                }

            }
            //砸蛋
            function eggshells() {
                $(".ball").off("click", aClick);
                var _this = $(this);
                _this.parents(".goldenAgg").addClass("paused");
                _this.html(
                    '<img src="http://invi.52carlife.com/lefthammer@2xleft.png" class="hammer"><img src="http://invi.52carlife.com/choujiangagg-puo@2x.png" class="agg-puo">'
                );
                setTimeout(function () {
                    _this.css({
                        background: "none"
                    }).find(".agg-puo").show();
                    setTimeout(function () {
                        // $(".winBox").show().find("#jiang").attr("src",
                        //     "http://invi.52carlife.com/choujiange8399.png");
                        // 更换多少奖金(设置中奖)
                        var moneyYuan = $("#money").text("200" + "元");
                        // 所获取的奖级别
                        var levelJ;
                        // var levelText = $("#level").text("");
                        // 判断奖项
                        switch (levelJ) {
                            case SPECIAL:
                                $("#level").text("特等奖")
                                break;
                            case FIRST:
                                $("#level").text("一等奖")
                                break;
                            case SECOND:
                                $("#level").text("二等奖")
                                break;
                            case THIRD:
                                $("#level").text("三等奖")
                                break;
                            case "PARTICIPATION":
                                $("#level").text("参与奖")
                                break;
                            case NONE:
                                $("#sorryBox").show();
                                break;
                            default:
                                break;
                        }
                    }, 500);
                }, 250);
            }

            // 共同(关闭奖项)
            function closeWin() {
                $(".winBox").hide();
                $("#sorryBox").hide();
                $(".goldenAgg").removeClass("paused");
                $(".ball").on("click", aClick).html("").attr("style", "");
            }
            // 关闭奖项
            $("#causel").on('click', function () {
                closeWin()
            })
            // 同时跳转到我的奖品
            function myWin() {
                obj();
                // 隐藏中奖图片
                closeWin()
                $(".jn-box").show().find(".btn-close").on('click', function () {
                    $(".jn-box").hide();
                });
                console.log($("#tabs").height());
                $("#tabs-body").css({
                    height: winH - $("#tabs").height()
                });

                //弹出中奖记录           
                var divs = $("#tabs-body > div");
                // 不确定这样写对不对（点击当前的删除同类的）
                $("#tabs > strong:eq(1)").addClass("current").siblings().removeClass("current");
                // $("#tabs > strong:eq(0)").removeClass("current");
                // $("#tabs > strong:eq(2)").removeClass("current");
                // $("#tabs > strong:eq(1)").addClass("current");
                divs.hide();
                divs.eq(1).show();
            }
            // 点击谢谢参与跳转到我的奖品
            $("#sorryBox > div > img").on('click', function () {
                myWin()

            })


            //  每隔时间段就刷新排行榜
            // $(function () {
            //    list(); // 第一次加载数据
            //     // 开启定时任务，时间间隔为3000 ms。
            //     setInterval(function () {
            //        list();
            //     }, 3000);
            // });
            // 循环排行榜
            function list() {
                for (var i = 0; i <= 1; i++) {
                    $("#moreItem").append(
                        ' <div class="moreHead" ><div class="more-icon"><p>4</p></div><div class="more-people">第四名</div></div>'
                    );

                }
                // $("#moreItem").html("");
                // 获取排名情况
                // $.ajax({
                //     url: '',
                //     success: function (res) {
                //         var data = res.data;
                //         var length = data.length;
                //         // 排列前三名
                //         $("#second_item").html("第二名")
                //         $("#first_item").html("第一名")
                //         $("#three_item").html("第三名")
                //         // 从第四名开始循环
                //         for (var j = 3; j < length; j++) {
                //             $("#moreItem").append(
                //                 ' <div class="moreHead" ><div class="more-icon"><p>4</p></div><div class="more-people">第四名</div></div>'
                //             );
                //         }

                //     }
                // })
            }
            //循环中奖纪录
            function obj() {
                $("#prizeRecord").remove(); //先清空，避免重复添加.
                //获取所有奖项记录
                // $.ajax({
                //     url: '',
                //     success: function (res) {

                //         var data = res.data;
                //         var length = data.length;

                //         for (var j = 0; j < length; j++) {

                //             var obj = data[j];

                //             var awardsType = obj.awardsType; //获取奖项类型

                //             var bonus = obj.bonus;

                //             var date = obj.createTime.substr(0, 10);

                //             if ('NONE' === awardsType) {
                //                 $("#prizeRecord").append(
                //                     '<div class="winRecord"><span>谢谢参与奖</span><span>中奖时间：2018.12.20</span></div>'
                //                 );
                //             } else {
                //                 $("#prizeRecord").append(
                //                     '<div class="winRecord"><span>200元现金劵</span><span>中奖时间：2018.12.20</span></div>'
                //                 );
                //             }
                //         }
                //     },
                // })
            }
            //转换时间
            function renderTime(date) {
                date = "2019-01-08T01:18:36.224+0000"
                var dateee = new Date(date).toJSON();
                return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(
                    /\.[\d]{3}Z/, '')
            }
            // 点击图片领取奖励
            $("#winBackImg").on('click', function () {
                myWin()
            })
            $(".ball").on("click", aClick);

            //关闭当前
            $("#closeWin").on('click', function () {
                $("#sorryBox").hide();
                $(".goldenAgg").removeClass("paused");
                $(".ball").on("click", aClick).html("").attr("style", "");
            });

            //打开锦囊
            $(".acePack").on('click', function () {
                // 刷新页面
                // $(".jn-box").load(location.href+" .jn-box");
                $(".jn-box").show().find(".btn-close").on('click', function () {
                    $(".jn-box").hide();
                });
                console.log($("#tabs").height());
                $("#tabs-body").css({
                    height: winH - $("#tabs").height()
                });
            });

            //切换积累金
            $("#tabs > strong").on('click', function () {

                var index = $(this).index();
                var divs = $("#tabs-body > div");
                $(this).addClass("current").siblings().removeClass("current");
                divs.hide();
                divs.eq(index).show();
                //判断点击是否是1，我的奖品才加载一次
                if (index == 1) {
                    obj();
                }
            });


            //关注二维码
            $(".btn-qrcode").on('click', function () {
                $(".qrcodeBox").show().find(".qr-close").on('click', function () {
                    $(".qrcodeBox").hide();
                });
            });
        }
        (function () {
            var init = function () {
                var updateOrientation = function () {
                    var orientation = window.orientation;
                    switch (orientation) {
                        case 90:
                        case -90:
                            orientation = 'landscape'; //这里是横屏
                            break;
                        default:
                            orientation = 'portrait'; //这里是竖屏
                            break;
                    }
                    document.body.parentNode.setAttribute('class', orientation);
                };
                window.addEventListener('orientationchange', updateOrientation, false);
                updateOrientation();
            };
            window.addEventListener('DOMContentLoaded', init, false);
        })();
    </script>

</body>

</html>